<template>
	<view class="content">
		<view class="list">
			<view v-for="(item, index) in wrongData" class="item" :key="item.id">
				<view class="top flex-pack-justify">
					<text class="type">{{item.time}}</text>
					<text class="title">模拟考试{{item.index}}</text>
					<text style="background-color: antiquewhite;width: 100rpx;height: 50rpx;margin-left: 60rpx;padding: 10rpx;border-radius: 20rpx;" @click="onClearClick(index)">删除本条记录</text>
				</view>
				<view class="bottom">
					<text class="level">错题数：{{item.data.length}}</text>
					<button class="handle-btn" @click="preparePractise(item)">查看详情</button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import Config from '@/config/config.js'

	export default {
		data() {
			return {
				from: '', // 来源，试卷列表 or 已购买purchase
				wrongData: [],
				member: {
					level: 0,
					passed: false
				}, // 会员信息
				title: '',
				functionId: 1,
				selectData: {},
				pageNumber: 1,
				pageSize: 10
			}
		},
		onLoad(e) {
			const wrongQuestion = uni.getStorageSync('wrong_question');
			this.wrongData = wrongQuestion.reverse();
		},
		onNavigationBarButtonTap(e) {},
		methods: {
			preparePractise(rowData) {
			 uni.setStorageSync("wrong_question_item", rowData.data);
       uni.navigateTo({
       	url: '/pages/index/myrecord'
       });
			},
			onClearClick(index){
				this.wrongData.splice(index, 1);
				uni.setStorageSync("wrong_question", this.wrongData);
				uni.showToast({
					title: '删除成功',
					icon: 'none'
				})
			}
		}
	}
</script>

<style>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		background-color: #f8f8f8;
	}

	.list {
		width: 100%;
	}

	.item {
		width: 100%;
		height: 160rpx;
		padding-top: 20rpx;
		background-color: #FFFFFF;
		border-bottom: solid 2rpx #F8F8F8;
	}

	.top {
		width: 100%;
		flex-direction: row;
		align-items: center;
		height: 60rpx;
		padding: 0 20rpx;
	}

	.type {
		color: #29B581;
		font-size: 32rpx;
	}

	.title {
		color: #1A1A1A;
		font-size: 32rpx;
		margin-left: 20rpx;
	}

	.pay {
		width: 32rpx;
		height: 40rpx;
		margin-left: 20rpx;
		top: 8rpx;
		position: relative;
	}

	.bottom {
		display: flex;
		flex-direction: row;
		height: 60rpx;
		align-items: center;
		margin-top: 20rpx;
	}

	.level {
		flex: 1;
		color: #1A1A1A;
		margin-left: 20rpx;
		font-size: 26rpx;
	}

	.handle-btn {
		border-radius: 30rpx;
		border-color: #ed675a;
		border-width: 2rpx;
		border-style: solid;
		width: 180rpx;
		height: 50rpx;
		line-height: 50rpx;
		text-align: center;
		color: #ed675a;
		background-color: #FFFFFF;
		font-size: 26rpx;
		margin-right: 20rpx;
	}
</style>